<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;src:local('Open Sans Italic'),local('OpenSans-Italic'),url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')}

body{
background-color:#e1e1e1;
padding:0;
margin:0;
color:#000;
text-align:center;
height:auto;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.content-wrapper{
width:100%;
padding:0;
margin:0;
position:relative;
}
.back{
background-color:#111;
padding:5px 10px;
color:#fff;
position:absolute;
top:0;
left: 100px;
}
h1{
margin:50px auto 15px;
font-weight:400
}
h2{
font-weight:400
}
.videoyoutube{
    text-align: center;
    background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
    border:1px solid #A8A8A8;
    border-radius:5px;
    margin:20px auto;
    width:80%;
    box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin:8px;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

</head>
<body>
<div class="content-wrapper">
<h1>Demo Page</h1>
<a href="http://www.kompiajaib.com/2014/10/embed-youtube-video-url-only-with-jquery.html" title="Back to article"><div class="back">
Back to article
</div></a>

<h2>Embed Youtube Video With URL Only</h2>
<div class="videoyoutube">
<div class="video-responsive">
http://www.youtube.com/watch?v=yLeQAS5xSAg
    </div>
    </div>
</div>  
<script type='text/javascript'>
var videoEmbed = {
    invoke: function(){       
        $('body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });      
    },
    convertMedia: function(html){
          var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;        
        if(pattern.test(html)){
              var replacement = '<iframe height="281" width="500" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
              var html = html.replace(pattern, replacement);
        } 
         return html;
    }
}
setTimeout(function(){
    videoEmbed.invoke();
},800);
</script>
</body>
</html>